<script>
export default {
  name: "animationPage",
  data() {
    return {
      flag:true,
      show:true,
      isshow:true,
      list:[1,2,3,4]
    }
  },
  methods: {
    beforeEnter(el) { // 动画进入之前的回调
      el.style.transform = 'translateX(500px)';
    },
    enter(el, done) { // 动画进入完成时候的回调
      el.offsetWidth;
      el.style.transform = 'translateX(0px)';
      done();
    },
    afterEnter() { // 动画进入完成之后的回调
      this.isshow = !this.isshow;
    }
  }
}
</script>

<template>
  <div>

    <button @click="flag=!flag">change</button>
    <transition>
      <div class="box" v-if="flag">
      </div>
    </transition>
    <transition name="box">
      <div class="box" v-if="flag">
      </div>
    </transition>
<!--    animate__fadeInLeft-->
    <button @click="show = !show">
      Toggle render
    </button>
    <transition
        name="custom-classes-transition"
        enter-active-class=" animate__animated  animate__tada"
        leave-active-class=" animate__animated  animate__bounceOutRight"
    >
      <p v-if="show">hello</p>
    </transition>

    <input type="button" value="切换动画" @click="isshow = !isshow">
    <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
      <div v-if="isshow" class="show">OK</div>
    </transition>

    <transition-group>
      <div class="box1" v-for="item in list" :key="item"></div>
    </transition-group>
  </div>
</template>

<style scoped lang="less">
.box{
  width: 100px;
  height: 100px;
  background-color: #42b983;
}
.box1{
  width: 100px;
  height: 100px;
  background-color: #42b983;
}
.v-enter {
  transform: translateX(400px);
}
.v-enter-to {
  transform: translateX(0);
}
.v-enter-active {
  transition: all 3s;
}
.v-leave{
  transform: translateX(0);
}
.v-leave-to {
  transform: translateX(400px);
}
.v-leave-active{
  transition: all 3s;
}

.box-enter {
  transform: translateX(400px);
}
.box-enter-to {
  transform: translateX(0);
}
.box-enter-active {
  transition: all 3s;
}
.box-leave{
  transform: translateX(0);
}
.box-leave-to {
  transform: translateX(400px);
}
.box-leave-active {
  transition: all 3s;
}
</style>